<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import {
  getArticlePage,
  type ArticlePage,
  type ArticleVO,
  type PageResult
} from '@/apis/blog/article'
import { useInitWebsiteInfo } from '@/composables/useInitWebsiteInfo'
const param = ref({
  title: undefined,
  tagId: undefined,
  categoryId: undefined
})
interface PaginationProps {
  total: number
  pageSize: number
  currentPage: number
}
const pagination = reactive<PaginationProps>({
  total: 10,
  pageSize: 9,
  currentPage: 1
})
const ArticleResult = ref<ArticleVO[]>()
const PageArticle = ref<PageResult<ArticleVO>>()

// 分页页码变化时的处理函数
const handleCurrentChange = (page: number) => {
  pagination.currentPage = page
  onSearch()
}
const router = useRouter()

// 跳转到文章详情页面
const goToArticleDetail = (id: number) => {
  console.log('id:', id)
  router.push({ name: 'ArticleDetail', params: { id } }) // 传递参数给 ArticleDetail 页面
}

const carouselImages = [
  'https://picsum.photos/id/1015/800/240',
  'https://picsum.photos/id/1016/800/240',
  'https://picsum.photos/id/1018/800/240'
]

async function onSearch() {
  PageArticle.value = await getArticlePage({
    currentPage: pagination.currentPage,
    pageSize: pagination.pageSize,
    title: param.title,
    tagId: param.tagId,
    categoryId: param.categoryId
  } as ArticlePage)
  ArticleResult.value = PageArticle.value.list
  pagination.total = PageArticle.value.total
}
const { webInfo, loading } = useInitWebsiteInfo()
onMounted(async () => {
  onSearch()
})
</script>
<template>
  <div
    class="min-h-screen bg-white dark:bg-black text-gray-900 dark:text-white transition-colors duration-300"
  >
    <!-- 搜索框 -->
    <div class="flex justify-center mt-6 mb-6 px-4 relative max-w-3xl mx-auto w-full">
      <svg
        class="absolute left-6 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500 pointer-events-none"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"
        />
      </svg>
      <input
        type="text"
        placeholder="搜索文章、标签..."
        class="w-full pl-14 px-5 py-3 text-base rounded-lg shadow-sm border border-gray-300 bg-white text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 dark:border-gray-600 dark:ring-0 dark:focus:ring-blue-300 transition"
      />
    </div>

    <!-- 主体卡片容器，最大宽度居中 -->
    <el-card
      class="mx-auto w-full max-w-[1600px] rounded-lg shadow-lg bg-white dark:bg-gray-900 dark:border dark:border-gray-700 transition-colors duration-300 border-none"
    >
      <div class="flex flex-col lg:flex-row gap-8">
        <!-- 主内容区 -->
        <section class="flex-1 flex flex-col">
          <!-- 通知栏 -->
          <div
            v-if="loading"
            class="mb-4 p-4 rounded-lg border border-gray-300 bg-gray-100 text-gray-800 text-center dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 animate-pulse"
          >
            <div class="h-4 w-3/4 mx-auto bg-gray-200 dark:bg-gray-600 rounded"></div>
          </div>
          <div
            v-else
            class="mb-4 p-4 rounded-lg border border-blue-300 bg-blue-100 text-blue-800 text-center dark:bg-[#c38b8b] dark:text-gray-100 dark:border-blue-700"
            role="alert"
          >
            🚀 {{ webInfo?.headNotice }}
          </div>

          <!-- 虚线分割 -->
          <div class="border-t border-dashed border-gray-300 dark:border-gray-600 mb-4"></div>

          <!-- 轮播图 -->
          <el-carousel
            height="240px"
            class="rounded-xl overflow-hidden shadow-md mb-6 border border-gray-200 dark:border-gray-600 transition-colors duration-300"
            autoplay
          >
            <el-carousel-item v-for="(img, index) in carouselImages" :key="index">
              <img :src="img" alt="轮播图" class="w-full h-full object-cover rounded-xl" />
            </el-carousel-item>
          </el-carousel>

          <!-- 博客卡片网格 -->
          <main class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
            <!-- 骨架屏显示 9 条 -->
            <BlogCardSkeleton
              v-if="loading"
              v-for="n in 9"
              :key="'skeleton-' + n"
              class="border border-transparent dark:border-gray-700 rounded-2xl"
            />
            <BlogCard
              v-else
              v-for="item in ArticleResult"
              :key="item?.id"
              :title="item.title"
              :summary="item.summary"
              :date="item.createTime"
              :category="item.category"
              :cover="item.cover"
              :tags="item.tags"
              :isTop="item.isTop === 1"
              class="border border-transparent dark:border-gray-700 rounded-2xl"
              @click="goToArticleDetail(item.id)"
            />
          </main>
          <!-- 分页 -->
          <div class="flex justify-center mt-6">
            <el-pagination
              background
              layout="prev, pager, next"
              v-model:current-page="pagination.currentPage"
              :pageSize="pagination.pageSize"
              :total="pagination.total"
              @current-change="handleCurrentChange"
              class="custom-pagination"
            />
          </div>
        </section>

        <!-- 侧边栏 -->
        <aside class="hidden lg:block w-full lg:w-[320px] xl:w-[360px] space-y-6">
          <SidebarSkeleton v-if="loading || !webInfo" />
          <SidebarWidgets v-else />
        </aside>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
/* 所有分页按钮统一圆角和间距 */
.custom-pagination :deep(.el-pager li),
.custom-pagination :deep(button.btn-prev),
.custom-pagination :deep(button.btn-next) {
  border-radius: 6px;
  margin: 0 4px;
  transition: all 0.3s;
}

/* 暗黑模式下：除了当前页的 li，都黑底白字 */
.dark .custom-pagination :deep(.el-pager li:not(.is-active)) {
  background-color: #1f1f1f;
  color: #ffffff;
}
.dark .custom-pagination :deep(.el-pager li:not(.is-active):hover) {
  background-color: #333333;
}

/* 暗黑模式下：上一页 / 下一页 按钮也黑底白字 */
.dark .custom-pagination :deep(button.btn-prev),
.dark .custom-pagination :deep(button.btn-next) {
  background-color: #1f1f1f;
  color: #ffffff;
}
.dark .custom-pagination :deep(button.btn-prev:hover),
.dark .custom-pagination :deep(button.btn-next:hover) {
  background-color: #333333;
}
/* 当前页默认样式保持蓝底白字，无需覆盖 */
</style>
